<template>
    <div class="wrapper">
      <el-descriptions title="个人信息" :column="2" border>
        <template slot="extra">
          <el-button size="small" v-show="!isEdit" @click="handleEdit">编辑</el-button>
          <el-button size="small" v-show="isEdit" @click="cancel">取消</el-button>
          <el-button type="primary" size="small" v-show="isEdit" @click="saveEdit">保存</el-button>
        </template>
        <el-descriptions-item>
          <template slot="label">
            姓名
          </template>
          <span v-show="!isEdit">{{alumni.realName}}</span>
          <el-input v-show="isEdit" v-model="alumni.realName" size="small"></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            身份证号
          </template>
          <span v-show="!isEdit">{{alumni.idNumber}}</span>
          <el-input v-show="isEdit" v-model="alumni.idNumber" size="small"></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            性别
          </template>
          <span v-show="!isEdit">{{alumni.sex}}</span>
          <el-input v-show="isEdit" v-model="alumni.sex" size="small"></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            年龄
          </template>
          <span v-show="!isEdit">{{alumni.age}}</span>
          <el-input v-show="isEdit" v-model="alumni.age" size="small"></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            出生日期
          </template>
          <span v-show="!isEdit">{{alumni.birthDate}}</span>
          <el-input v-show="isEdit" v-model="alumni.birthDate" size="small"></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            在校学号
          </template>
          <span v-show="!isEdit">{{alumni.stuNumber}}</span>
          <el-input v-show="isEdit" v-model="alumni.stuNumber" size="small"></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            学历
          </template>
          <span v-show="!isEdit">{{alumni.education}}</span>
          <el-input v-show="isEdit" v-model="alumni.education" size="small"></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            微信号
          </template>
          <span v-show="!isEdit">{{alumni.wechat}}</span>
          <el-input v-show="isEdit" v-model="alumni.wechat" size="small"></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            QQ
          </template>
          <span v-show="!isEdit">{{alumni.qq}}</span>
          <el-input v-show="isEdit" v-model="alumni.qq" size="small"></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            邮箱
          </template>
          <span v-show="!isEdit">{{alumni.email}}</span>
          <el-input v-show="isEdit" v-model="alumni.email" size="small"></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            现居住地
          </template>
          <span v-show="!isEdit">{{alumni.address}}</span>
          <el-input v-show="isEdit" v-model="alumni.address" size="small"></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            在校职务
          </template>
          <span v-show="!isEdit">{{alumni.schoolRole}}</span>
          <el-input v-show="isEdit" v-model="alumni.schoolRole" size="small"></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            入学日期
          </template>
          <span v-show="!isEdit">{{alumni.admissionDate}}</span>
          <el-input v-show="isEdit" v-model="alumni.admissionDate" size="small"></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            毕业日期
          </template>
          <span v-show="!isEdit">{{alumni.graduationDate}}</span>
          <el-input v-show="isEdit" v-model="alumni.graduationDate" size="small"></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            在校班级
          </template>
          <span v-show="!isEdit">{{alumni.clazz.className}}</span>
          <el-input v-show="isEdit" v-model="alumni.clazz.className" size="small"></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            在校专业
          </template>
          <span v-show="!isEdit">{{alumni.major.majorName}}</span>
          <el-input v-show="isEdit" v-model="alumni.major.majorName" size="small"></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            在校学院
          </template>
          <span v-show="!isEdit">{{alumni.college.collegeName}}</span>
          <el-input v-show="isEdit" v-model="alumni.college.collegeName" size="small"></el-input>
        </el-descriptions-item>
      </el-descriptions>
    </div>
</template>

<script>
    export default {
        name: "PersonalInfo",
        data(){
            return{
                currentUser:{},
                alumni: {},
                isEdit: false,
                oldInfo: null
            }
        },
        created() {
            const user=sessionStorage.getItem('currentUser');
            this.currentUser=JSON.parse(user);
            this.getAlumni();
        },
        methods: {
            getAlumni(){
                const params={alumniId: this.currentUser.alumniId};
                this.getRequest('/getAlumniDetail', params).then(res=>{
                    if(res){
                        this.alumni=res;
                    }else{
                        console.log('获取当前校友信息失败!');
                    }
                })
            },
            handleEdit(){
                this.oldInfo=JSON.parse(JSON.stringify(this.alumni));  //保存副本
                this.isEdit=true;
            },
            cancel(){
                this.alumni=this.oldInfo;
                this.isEdit=false;
            },
            saveEdit(){
                this.$confirm(`确定要保存对您个人信息的修改吗？`,'提示', {type: 'warning'}).then(()=>{
                    this.alumni.updateTime=this.datetime2string(new Date());
                    this.alumni.updateBy=this.currentUser.userId;
                    let data=JSON.parse(JSON.stringify(this.alumni));
                    data.createOne=null;
                    data.updateOne=null;
                    data.college=null;
                    data.major=null;
                    data.clazz=null;
                    this.postRequest('/updateAlumni', data).then(res=>{
                        if(res==='success'){
                            this.$message.success('保存成功！');
                            this.isEdit=false;
                        }else{
                            this.$message.error('操作失败！');
                        }
                    })
                })
            }
        }
    }
</script>

<style scoped>
  .wrapper{
    width: 75%;
    margin: 0 auto;
  }
</style>
